<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类参数</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
    <el-alert style="margin-bottom: 20px;" title="注意：只允许为第三级分类设置相关参数！" type="warning" />
    <div>
      <span>选择商品分类：</span>
      <el-cascader size="large" v-model="select" :options="categories" :props="props" @change="handleChange" />
    </div>

    <el-tabs>
      <el-tab-pane label="动态参数">
        <el-button size="large" type="primary" @click="addOrEditDialog('添加参数', 'many')">添加参数</el-button>
        <!-- 表格区域 -->
        <el-table stripe size="large" row-key="attr_id" :data="cateList" border style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-tag style="margin-left: 10px;" size="large" v-for="(tag, i) in props.row.attr_vals" :key="i" closable
                :disable-transitions="false" @close="delTag(props.row, i)">
                {{ tag }}
              </el-tag>
              <el-input v-if="inputVisible" style="margin-left: 10px;width: 80px" ref="inputRef" v-model="tagVal"
                @keyup.enter="addTag(props.row)" @blur="addTag(props.row)" />
              <el-button v-else style="margin-left: 10px;width: 80px" @click="addNewTag">
                + New Tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index" width="50" />
          <el-table-column prop="attr_name" label="参数名称" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit"
                @click="addOrEditDialog('编辑参数', 'many', scope.row.attr_id)">编辑</el-button>
              <el-button type="danger" :icon="Delete" @click="delAttr(scope.row.attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态属性">
        <el-button size="large" type="primary" @click="addOrEditDialog('添加属性', 'only')">添加属性</el-button>
        <!-- 表格区域 -->
        <el-table stripe size="large" :data="attrList" border style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-tag style="margin-left: 10px;" size="large" v-for="(tag, i) in props.row.attr_vals" :key="i" closable
                :disable-transitions="false" @close="delTag(props.row, i)">
                {{ tag }}
              </el-tag>
              <el-input v-if="inputVisible" style="margin-left: 10px;width: 80px" ref="inputRef" v-model="tagVal"
                @keyup.enter="addTag(props.row)" @blur="addTag(props.row)" />
              <el-button v-else style="margin-left: 10px;width: 80px" @click="addNewTag">
                + New Tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index" width="50" />
          <el-table-column prop="attr_name" label="参数名称" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit"
                @click="addOrEditDialog('编辑属性', 'only', scope.row.attr_id)">编辑</el-button>
              <el-button type="danger" :icon="Delete" @click="delAttr(scope.row.attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>

  <el-dialog v-model="dialogVisible" :title="diaTitle" width="30%" :before-close="close">
    <el-form>
      <el-form-item label="参数名称">
        <el-input v-model="attrName"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrEditAttr">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, getCurrentInstance, nextTick } from 'vue';
import { getCategoriesApi, getCateListApi, addAttrApi, getAttrByIdApi, editAttrApi, delAttrApi } from '@/api/goodsInfa';
import { Search, Edit, Delete } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as any

onMounted(() => {
  getCategories()
})
const props = reactive({
  expandTrigger: 'hover',
  value: 'cat_id',
  label: 'cat_name'
})
// 获取分类
const select = ref()
const categories = ref()
const getCategories = () => {
  getCategoriesApi().then(res => {
    categories.value = res.data
  })
}

// 获取参数列表
const cateList = ref()
const attrList = ref()
const handleChange = (val: any) => {
  getCateListApi(val[2], { sel: 'many' }).then(res => {
    cateList.value = res.data.map((item: any) => {
      return {
        ...item,
        attr_vals: item.attr_vals.split(' ')
      }
    })
  })
  getCateListApi(val[2], { sel: 'only' }).then(res => {
    attrList.value = res.data.map((item: any) => {
      return {
        ...item,
        attr_vals: item.attr_vals.split(' ')
      }
    })
  })
}

const diaTitle = ref()
const dialogVisible = ref(false)
const close = () => {
  handleChange(select.value)
  dialogVisible.value = false
}

const attrName = ref()
const attrType = ref()
const attrId = ref()
const addOrEditDialog = (title: string, type: string, id = undefined) => {
  if (id) {
    attrId.value = id
    getAttrByIdApi(select.value[2], id, { attr_sel: type }).then(res => {
      attrName.value = res.data.attr_name
    })
  }
  diaTitle.value = title
  attrType.value = type
  dialogVisible.value = true
}
const addOrEditAttr = () => {
  if (!attrId.value) {
    addAttrApi(select.value[2], { attr_name: attrName.value, attr_sel: attrType.value }).then(res => {
      if (res.meta.status === 201) {
        proxy.$message.success('添加成功')
        close()
      }
    })
  } else {
    editAttrApi(select.value[2], attrId.value, { attr_name: attrName.value, attr_sel: attrType.value }).then(res => {
      if (res.meta.status === 200) {
        proxy.$message.success('编辑成功')
        close()
      }
    })
  }
}

const delAttr = (id: any,) => {
  proxy.$messageBox.confirm(
    '确定删除此参数？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delAttrApi(select.value[2], id).then(res => {
        if (res.meta.status == 200) {
          proxy.$message.success('删除成功')
          handleChange(select.value)
        }
      })
    })
}

const inputVisible = ref(false)
const delTag = (row: any, i: number) => {
  row.attr_vals.splice(i, 1)
  const obj = {
    attr_name: row.attr_name,
    attr_sel: row.attr_sel,
    attr_vals: row.attr_vals.join(' ')
  }
  editAttrApi(row.cat_id, row.attr_id, obj).then(res => {
    proxy.$message.success('删除参数成功')
  })
}
const tagVal = ref()
const inputRef = ref()
const addNewTag = () => {
  inputVisible.value = true
  nextTick(() => {
    inputRef.value.focus()
  }) 
}
const addTag = (row: any) => {
  if (!tagVal.value) {
    return inputVisible.value = false
  }
  row.attr_vals.push(tagVal.value)
  const obj = {
    attr_name: row.attr_name,
    attr_sel: row.attr_sel,
    attr_vals: row.attr_vals.join(' ')
  }
  editAttrApi(row.cat_id, row.attr_id, obj).then(res => {
    proxy.$message.success('添加参数成功')
    tagVal.value = ''
    inputVisible.value = false
  })
}
</script>

<style scoped lang="scss">
.el-card {
  margin-top: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-input {
  width: 500px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>